<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-button type="success" size="medium">新增用户</el-button>
      </el-card>

      <el-card style="margin-top: 20px; height: calc(100vh - 290px)">
        <!-- 客户列表表格 -->

        <vxe-grid
          ref="formRef"
          border
          background
          resizable
          max-height="480"
          align="center"
          :columns="tableColumn"
          :data="tableData"
          :loading="loading"
          :row-config="{ height: 43, isCurrent: true, isHover: true }"
          show-overflow
        >
          <!-- 沟通方式 -->
          <template #grid_chat="{ row }">
            <span
              v-for="item in row.customer_main_chat_ways"
              :key="item.key"
            >{{ item.value
            }}<span
              v-show="row.customer_main_chat_ways.length > 1"
            >、</span></span>
          </template>
          <!-- 行操作按钮 -->
          <template #grid_opration="{ row, column, $rowIndex, $columnIndex }">
            <el-button
              v-for="(item, i) in optColumnButtonList"
              :key="'opt_' + row.id + '_' + i"
              type="text"
              @click="
                toolbarButtonCallBack(
                  row,
                  column,
                  $rowIndex,
                  $columnIndex,
                  item.clickFn
                )
              "
            >
              {{ item.title }}
            </el-button>
          </template>
          <!-- 分页器 -->
          <template #pager>
            <vxe-pager
              :layouts="[
                'Sizes',
                'PrevJump',
                'PrevPage',
                'Number',
                'NextJump',
                'FullJump',
                'Total',
              ]"
              :current-page.sync="tablePage.page_num"
              :page-size.sync="tablePage.page_amounts"
              :total="tablePage.total"
              @page-change="handlePageChange"
            />
          </template>
        </vxe-grid>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      // table列
      tableColumn: [
        // { type: "checkbox", width: 50 },
        { type: 'seq', title: '序号', width: 60 },
        { field: 'customer_add_time', title: '姓名', width: 200 },
        { field: 'customer_owner', title: '头像', width: 80 },
        { field: 'customer_name', title: '手机号', width: 200 },
        { field: 'customer_flow_up_status', title: '入职时间', width: 200 },
        { field: 'customer_last_flow_time', title: '状态', width: 200 },

        {
          field: '',
          title: '操作',
          width: 200,
          fixed: 'right',
          slots: { default: 'grid_opration' }
          // slots: {
          //   default: ({ row }) => {
          //       return [
          //         <div>
          //           <vxe-button size="mini" status="primary" >查看</vxe-button>
          //           <vxe-button size="mini" status="warning">编辑</vxe-button>
          //           <vxe-button size="mini" status="danger">删除</vxe-button>
          //         </div>
          //       ]
          //   }
          // }
        }
      ],

      tableData: [], // table数据
      // 分页器配置
      tablePage: {
        page_num: 1,
        page_amounts: 10,
        total: 0
      },
      // 列表的操作按钮
      optColumnButtonList: [
        { type: 'view', title: '查看', clickFn: this.handleView },
        { type: 'edit', title: '编辑', clickFn: this.handleEdit },
        { type: 'delete', title: '删除', clickFn: this.handleDelete }
      ]
    }
  },

  methods: {
    // 切换分页
    async handlePageChange(row) {
      this.tablePage.page_num = row.currentPage
      this.tablePage.page_amounts = row.pageSize
      this.getCustomerDataList(this.tablePage)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-link {
  margin-right: 5px;
}

.el-pagination {
  margin-top: 20px;
}

::v-deep .el-button--success {
  background-color: #1fcaa4;
  border-color: #1fcaa4;
}
</style>
